<!DOCTYPE html>
<html>
    <head>
        <script>
            var t=0;
            function play(src){
                var audio = document.createElement("audio");
                audio.src = src+".MP3";
                audio.play();
            }
            function green(position1){
                document.getElementById(position1).style="color:red";
            }
                document.onkeydown=function(event){
                    var t1=new Date();
                    if(t1.getTime()-t>=64){
                        for(var i=1;i<=16;i++){
                            document.getElementById(i).style="color:black";
                        }
                    }
                    event=event||window.event;
                    switch(event.keyCode){
                        case 49:
                            play(1);
                            green(1);
                            break;
                        case 50:
                            play(2);
                            green(2);
                            break;
                        case 51:
                            play(3);
                            green(3);
                            break;
                        case 52:
                            play(4);
                            green(4);
                            break;
                        case 81:
                            play(5);
                            green(5);
                            break;
                        case 87:
                            play(6);
                            green(6);
                            break;
                        case 69:
                            play(7);
                            green(7);
                            break;
                        case 82:
                            play(8);
                            green(8);
                            break;
                        case 65:
                            play(9);
                            green(9);
                            break;
                        case 83:
                            play(10);
                            green(10);
                            break;
                        case 68:
                            play(11);
                            green(11);
                            break;
                        case 70:
                            play(12);
                            green(12);
                            break;
                        case 90:
                            play(13);
                            green(13);
                            break;
                        case 88:
                            play(14);
                            green(14);
                            break;
                        case 67:
                            play(15);
                            green(15);
                            break;
                        case 86:
                            play(16);
                            green(16);
                            break;
                    }
                    t=t1.getTime();
                }
        </script>
        <small id="1">C5/1&nbsp; </small>
        <small id="2">D5/2&nbsp; </small>
        <small id="3">E5/3&nbsp; </small>
        <small id="4">F5/4&nbsp; </small>
        <br>
        <small id="5">G5/q </small>
        <small id="6">A6/w </small>
        <small id="7">B6/e </small>
        <small id="8">C6/r </small>
        <br>
        <small id="9">D6/a&nbsp; </small>
        <small id="10">E6/s&nbsp; </small>
        <small id="11">F6/d&nbsp; </small>
        <small id="12">G6/f&nbsp; </small>
        <br>
        <small id="13">A7/z&nbsp; </small>
        <small id="14">B7/x&nbsp; </small>
        <small id="15">C7/c&nbsp; </small>
        <small id="16">D7/v&nbsp; </small>
    </head>
</html>